<script setup lang="ts">
import { computed } from 'vue';
import type { InputProps } from './types';

const textValue = defineModel<string>({ default: '' });

const props = withDefaults(defineProps<InputProps>(), {
  type: 'text',
  max: 100
});

const textNum = computed(() => textValue.value.length);

defineOptions({ name: 'MInput' });
</script>

<template>
  <div class="relative leading-[0px]">
    <input
      v-if="props.type === 'text'"
      type="text"
      :max="props.max"
      class="w-full rounded-sm border-[1px] border-zinc-200 px-1 py-0.5 text-sm outline-0 duration-100 focus:border-blue-400 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-400"
      v-model="textValue"
    />
    <textarea
      v-if="props.type === 'textarea'"
      rows="5"
      :max="props.max"
      class="w-full rounded-sm border-[1px] border-zinc-200 px-1 py-0.5 text-sm outline-0 duration-100 focus:border-blue-400 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-400"
      v-model="textValue"
    />
    <span
      v-if="props.max != null"
      class="absolute right-1 bottom-0.5 text-xs"
      :class="{
        'text-red-700': textNum >= props.max,
        'text-zinc-400': textNum < props.max
      }"
    >
      {{ textNum }}/{{ props.max }}
    </span>
  </div>
</template>
